<script id='page_index_template' type='mustache-template'>
	<ul>
		{{#data}}
			<li><a rel='{{key}}' href='javascript:load_page("{{key}}")'>{{url}}</a></li>
		{{/data}}
	</ul>
</script>
<script id='page_index_empty_template' type='mustache-template'>
	<p>...</p>
</script>

<script type='text/javascript'>
	
	// handle keyboard events
	var isCtrl = false; 
	$(document).keyup(function (e) { 
		
		if(e.which == 17) {
			isCtrl=false; 
		}
	});
	
	$(document).keydown(function (e) { 
		if(e.which == 17) {
			isCtrl = true; 
		}
		if(e.which == 83 && isCtrl == true) { 
			save_page();
			return false; 
		}
	});
	
	// variables
	var current_page        				= null;
	var page_index                  		= null;
	var current_mode                		= 'template';
	
	// handles
	$page_left_container             		= null;
	$page_right_container               	= null;
	$page_mode_selector   					= null;
	$page_editor          					= null;
	$page_python_editor   					= null;
	$page_template_editor 					= null;
	$page_property_editor 					= null;	
	$button_show_python_editor     			= null;
	$button_show_template_editor   			= null;
	$button_show_property_editor   			= null;
	$field_page_index_filter        		= null;
	$field_url 								= null;
	$field_mime 							= null;
	$field_template							= null;
	$field_python 							= null;
	$field_new_page_url            		 	= null;
	$field_new_page_mime            		= null;
	$page_controls                          = null;
	$page_controls_url_text                 = null;

	
	function handle_window_resize() {
		var h = $('#content').height() - 70;
		// need to adjust the height of elements footers.
		$('#page_index').css({height : h});
		$('.CodeMirror-scroll').css({height : h});	
	}
	
	// intialize ui handles
	function initialize_controls() {
		// fetch ui handles
		$page_left_container  					= $('#page_left_container');
		$page_right_container                   = $('#page_right_container');
		$page_mode_selector                   	= $('#page_mode_selector');
		$page_editor                 			= $('#page_editor');
		$page_python_editor           			= $('#page_python_editor');
		$page_template_editor        		    = $('#page_template_editor');
		$page_property_editor         			= $('#page_property_editor');
		$button_show_python_editor              = $('#button_show_python_editor');
		$button_show_template_editor  			= $('#button_show_template_editor');
		$button_show_property_editor 			= $('#button_show_property_editor');
		$field_page_index_filter                = $('#field_page_index_filter');
		$field_url         						= $('#field_url');
		$field_mime								= $('#field_mime');
		$field_python                           = ironcap.ui.editor.initialize('#page_python_editor',   'python');
		$field_template                         = ironcap.ui.editor.initialize('#page_template_editor', 'xml');
		$field_new_page_url                     = $('#field_new_page_url');
		$field_new_page_mime                    = $('#field_new_page_mime');
		$page_controls                          = $('#page_controls');
		$page_controls_url_text                 = $('#page_controls_url_text');
		
		// hide editors.
		$page_python_editor.hide();
		$page_template_editor.hide();
		$page_property_editor.hide();
	}
	
	// intialize page index
	function load_page_index ()  {
		ironcap.api.call('/ironcap/pages/index', null, function(result) {
			if(result.success) {
				page_index = result.data;
				filter_page_index();
				$page_left_container.fadeIn();
			}
			else {
				alert(result.message);
			}
		});	
	}
	function filter_page_index() {
		if(page_index) {
			var filtered = new Array();
			for(var i = 0; i < page_index.length; i++) {
				if(page_index[i].url.indexOf($field_page_index_filter.val()) != -1) {
					filtered.push(page_index[i]);
				}
			}
			if(filtered.length > 0) {
				ironcap.ui.template.initialize('#page_index', 'page_index_template', { data : filtered });
			}
			else {
				ironcap.ui.template.initialize('#page_index', 'page_index_empty_template', {});
			}
		}
	}
	
	// update selection state on mode select buttons
	function update_page_index_links (mode) {
		$button_show_template_editor.removeClass('selected');
		$button_show_property_editor.removeClass('selected');
		$button_show_python_editor.removeClass('selected');	
		if(mode == 'python')   $button_show_python_editor.addClass('selected');
		if(mode == 'template') $button_show_template_editor.addClass('selected');
		if(mode == 'property') $button_show_property_editor.addClass('selected');
	}	
	
	// update selection state on mode select buttons
	function update_mode_select_buttons (mode) {
		$button_show_template_editor.removeClass('selected');
		$button_show_property_editor.removeClass('selected');
		$button_show_python_editor.removeClass('selected');	
		if(mode == 'python')   $button_show_python_editor.addClass('selected');
		if(mode == 'template') $button_show_template_editor.addClass('selected');
		if(mode == 'property') $button_show_property_editor.addClass('selected');
	}		
	
	// show template editor
	function show_template_editor () {
		update_mode_select_buttons('template');
		$page_python_editor.hide();
		$page_property_editor.hide();
		$page_template_editor.show();
		$field_template.setValue($field_template.getValue());
		current_mode = 'template'		
	}
	
	// show python editor
	function show_python_editor () {
		update_mode_select_buttons('python');
		$page_template_editor.hide();
		$page_property_editor.hide();
		$page_python_editor.show();
		$field_python.setValue($field_python.getValue());
		current_mode = 'python'		
	}

	// show page properties
	function show_property_editor () {
		update_mode_select_buttons('property');
		$page_python_editor.hide();
		$page_template_editor.hide();
		$page_property_editor.show();
		current_mode = 'property'		
	}
	
	// binds the current page to this editor.
	function bind_current_page () {
		$page_controls_url_text.html(current_page.url);
		$field_url.val(current_page.url);
		$field_mime.val(current_page.mime);
		current_page.template  ? $field_template.setValue (current_page.template) : $field_template.setValue('');
		current_page.code      ? $field_python.setValue   (current_page.code)     : $field_python.setValue('');
		
		if(current_page.mime == 'text/plain')
			$field_template.setOption("mode", "text");
		if(current_page.mime == 'text/html')
			$field_template.setOption("mode", "xml");
		if(current_page.mime == 'text/xhtml')
			$field_template.setOption("mode", "xml");
		if(current_page.mime == 'text/xml')
			$field_template.setOption("mode", "xml");
		if(current_page.mime == 'text/css')
			$field_template.setOption("mode", "css");
		if(current_page.mime == 'text/javascript')
			$field_template.setOption("mode", "javascript");			
		
	}
	// unbinds the current page from this editor.
	function unbind_current_page(){
		$field_url.val('');
		$field_mime.val('');	
		$field_template.setValue ('');	
		$field_python.setValue   ('');	
	}
	
	// save page
	function save_page() {
		var data = {
			key      : current_page.key,
			url      : $field_url.val(),
			mime     : $field_mime.val(),
			code     : $field_python.getValue(),
			template : $field_template.getValue()
		};
		ironcap.api.call('/ironcap/pages/update', data, function(result) {
			if(result.success) {
				load_page_index(); // need to optimize this to only refresh the current page.
				$page_controls_url_text.html($field_url.val());
			}
			else {
				alert(result.message);
			}
		});
	}
	
	// delete page
	function delete_page() {
		if(confirm('really delete this page?')) {
			var data = {
				key : current_page.key
			};
			ironcap.api.call('/ironcap/pages/delete', data, function(result){
				if(result.success) {
					current_page = null;
					$page_right_container.fadeOut(function() {
						$page_python_editor.hide();
						$page_template_editor.hide();
						$page_property_editor.hide();
						load_page_index(); // need to optimize this to only refresh the current page.
					});
						
				} else {
					alert(result.message);
				}
			});
		}
	}
	
	// load page
	function load_page(key) {
		unbind_current_page();
		$page_right_container.fadeOut(function() {
			ironcap.api.call('/ironcap/pages/get', {key : key}, function(result) {
				if(result.success) {
					current_page = result.data;
					bind_current_page();
					if(current_mode == 'template') show_template_editor();
					if(current_mode == 'python')   show_python_editor();
					if(current_mode == 'property') show_property_editor();
					$page_right_container.fadeIn();
					handle_window_resize();
				} else  {
					alert(result.message);
				}
			});
		});
	}	
	
	// handle editor resize
	$(window).resize(function() {
		handle_window_resize();
	});	
	
	// document initialize
	$(document).ready(function() {
		load_page_index();
		initialize_controls();
		handle_window_resize();
	});
	
	// creates a page
	function create_page(){
		$( "#new_page_dialog" ).dialog({
			autoOpen  : true,
			resizable : false,
			modal     : false,
			show      : 'fade',
			hide      : 'fade',
			buttons: {
				"create": function() {
					var data = {
						url  : $field_new_page_url.val(),
						mime : $field_new_page_mime.val()
					};
					var that = this;
					ironcap.api.call('/ironcap/pages/create', data, function(result){
						if(result.success){
							load_page_index();
							load_page(result.data.key);
							$( that ).dialog( "close" );
						}else{
							alert(result.message);
						}
					});
				},
				'cancel': function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				
			}
		});
	}
	
	
</script>



<div id='page_container'>

	<div id='page_left_container' style='display: none;'>

		<div id='page_filter' >

			<input id='field_page_index_filter' type='text' value='/' onkeyup='filter_page_index()' />
			
			<a href='javascript:create_page()'>create</a>
		
		</div>

		<div id='page_index'>
			
			<!-- page index here --> 
			
		</div>
		
	</div>

	<div id='page_right_container'  style='display : none;'>

		<div id='page_mode_selector'>
		
				<ul>
				
					<li><a id='button_show_template_editor'          href='javascript:show_template_editor()' class='selected'>template</a></li>
					
					<li><a id='button_show_python_editor' 			 href='javascript:show_python_editor()'>python</a></li>
					
					<li><a id='button_show_property_editor'  	     href='javascript:show_property_editor()'>properties</a></li>

				</ul>

		</div>
		
		<div id='page_controls'>
		
			<ul>
			
				<li id='page_controls_url_text'>/home/about/systems/core</li>
			
				<li><a href='javascript:save_page()'>save</a></li>
				
				<li><a href='javascript:delete_page()'>delete</a></li>
				
			</ul>
			
		</div>	
		
		<div id='page_editor' >

			<div id='page_template_editor'>
				
				<!-- template editor injected here -->
			
			</div>
			
			<div id='page_python_editor'>
			
			<!-- template editor injected here -->
			
			</div>
			
			<div id='page_property_editor'>
			
				<div id='property_editor'>
				
					<div class='form'>
					
						<fieldset>
						
							<div class='form-row'>
							
								<p>the url for this page</p>
								
							</div>
							
							<div class='form-row'>
							
								<input id='field_url' type='text' value='...'/>
								
							</div>
							
							<div class='form-row'>
							
								<p>the mime type of this page</p>
								
							</div>		
							
							<div class='form-row'>
							
								<input id='field_mime' type='text' value='...' />
								
							</div>
							
						</fieldset>
						
					</div>
						
				</div>	
			
			</div>		

		</div>

	</div>


</div>


<!-- new page dialog --> 

<div id='new_page_dialog' title="create page" style='display : none'>

	<div class='form'>

		<fieldset>
		
			<label for="name">url</label>
			
			<input type="text" id="field_new_page_url" value='/new' class="text ui-widget-content ui-corner-all" />
			
			<label for="email">mime</label>
			
			<input type="text" id="field_new_page_mime" value='text/html' class="text ui-widget-content ui-corner-all" />
			
		</fieldset>

	</div>
	
</div>

